<template>
		<div v-transfer-dom>
			<popup v-model="showPopup" position="right">
				<div style="width:7.5rem;"  class="outDivdes main">
					<div class="backToPer" @click="goback">
						<i class="imgIcon"></i>
					</div>
					<scroller style="top: 0.8rem;">
						<div style="width: 7.5rem;min-height: 100vh;">
						
							<div class="mainsss">
								<div class="title">
									<h2>{{ newsDetail.title }}</h2>
									<p>{{ newsDetail.publish_at }}</p>
								</div>
								<div class="content" v-html="newsDetail.content"></div>

							</div>
							<div style="width: 100%; height: 1.5rem;"></div>
						</div>
					</scroller>
				</div>
			</popup>
		</div>
</template>

<script>
	import { getmoments } from "~/api/school"
	import ls from 'store2';
	import {
		TransferDom,
		Popup,
	} from 'vux'
	export default {
		components: {
			Popup,
			TransferDom
		},
		directives: {
			TransferDom
		},
		props: {
			showPop: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				newsDetail: {},
				showPopup: null,
			}
		},
		watch: {
			showPop(boolean) {
				this.showPopup = boolean;
			},
		},
		mounted() {
		},
		methods: {
			getNewsDetail(id) {
				
				getmoments(id).then(res => {
					this.newsDetail = res;
				}).catch((error) => {
					this.$vux.toast.text('暂无数据');
				}).finally(() => {
				})
			},
			goback() {
				this.newsDetail={};
				this.$emit('closePop', false)
			}
		}
	}
</script>

<style lang="less">
	.outDivdes {
		width: 100%;
		height: 100vh;
		background: #fff;

		.backToPer {
			padding: 0 0.32rem;
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			text-align: left;
			overflow: hidden;
			.imgIcon {
				display: inline-block;
				width: 0.4rem;
				height: 0.4rem;
				margin-bottom: 0.2rem;
      			background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
				background-size:3rem 2.4rem; 
			}

		}

		.mainsss {
			padding: 0 0.32rem;
			width: 100%;

			

			.title {
				margin-top: 0.08rem;
				padding-bottom: 0.34rem;
				border-bottom: 1px solid #E5E8ED;

				h2 {
					margin-bottom: 0.4rem;
					color: #222;
					font-size: 0.4rem;
					font-weight: bold;
					line-height: 0.64rem;
				}

				p {
					color: #BBB;
					font-size: 0.26rem;
					line-height: 0.3rem;
				}
			}

			.content {
				margin-top: 0.32rem;
				width: 100%;

				overflow: hidden;
				p {
					display: block;
					width: 100%;
					height: auto;
					font-size: 0.3rem;

					img {
						display: block;
						width: auto;
						max-width: 6.9rem;
						
						height: auto;
						margin: 0 auto;
						
					}
				}

			}
		}
	}
</style>
